<!--  -->
<template>
  <div id="tagCloud-search">
    <c-title :hide="false" text="搜索"></c-title>
    <van-sticky :offset-top="40">
      <van-search @search="onSearch" v-model="title" placeholder="搜索" />
    </van-sticky>
    <div class="list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="list-cell" v-for="(item, index) in list" :key="index" @click="gotoUrl(item.link)">
            <img :src="item.logo" />
            <div class="name">{{ item.title }}</div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      total_page: 0,
      page: 1,
      list: [],
      title: ""
    };
  },
  components: {},
  computed: {},
  created() {},
  methods: {
    getData() {
      $http
        .get("plugin.tg-decorate.frontend.app.search", { page: this.page, title: this.title })
        .then(response => {
          this.refreshing = false;
          this.loading = false;
          if (response.result === 1) {
            if (this.page == 1) {
              this.list = [];
            }
            this.list = this.list.concat(response.data.data);
            this.total_page = response.data.last_page;
            this.page = this.page + 1;
            if (response.data.current_page == response.data.last_page) {
              this.finished = true;
            }
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    initData() {
      this.loading = true;
      this.finished = false;
      this.page = 1;
      this.list = [];
    },
    onRefresh() {
      this.initData();
      this.getData();
    },
    onLoad() {
      this.getData();
    },
    onSearch() {
      this.initData();
      this.getData();
    },
    gotoUrl(_link) {
      if (!_link) return;
      window.location.href = _link;
    },
    toUrl(_name, _params = {}, _query = {}) {
      if (_name) this.$router.push(this.fun.getUrl(_name, _params, _query));
    }
  }
};
</script>
<style lang="scss" scoped>
#tagCloud-search {
  background: #fff;
}

.list-cell {
  display: flex;
  align-items: center;
  margin: 1.25rem 0.9375rem;
}

.list-cell img {
  width: 2.1875rem;
  height: 2.1875rem;
  background-color: #a6a6a6;
  border-radius: 50%;
  margin-right: 0.625rem;
}

.list-cell .name {
  text-align: left;
  font-size: 0.9375rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
